<template>
  <div class="main-body">
    <ul class="title">
      <li style="--i:1;">A</li>
      <li style="--i:2;">I</li>
      <li style="--i:3;">智</li>
      <li style="--i:4;">能</li>
      <li style="--i:5;">助</li>
      <li style="--i:6;">手</li>
    </ul>
    <div class="chat-body" ref="chatBody">
      <div v-for="(item, index) in MessageList" :key="index" class="chat-history">
        <div class="user-msg" v-if="item.role === 'user'">
          <div class="msg-right">{{ item.content }}</div>
          <img src="../static/userImage.jpg" class="avatar">
        </div>
        <div class="chat-msg" v-if="item.role === 'assistant'">
          <img src="../static/loading.gif" class="avatar">
          <MdPreview :model-value="item.content" class="msg-left"></MdPreview>
        </div>
      </div>
    </div>

    <div class="input-era">
      <send_input :isSend="isSend" @send_message="handle_message" ref="send-input"></send_input>
    </div>
  </div>
</template>

<script>
import send_input from "./send-input.vue"
import 'md-editor-v3/lib/style.css'
import { MdPreview } from 'md-editor-v3'
import ImgUrl from '@/static/Rob-img.png'
//import axios from "axios";
export default {
  components: {
    MdPreview,
    send_input,
  },
  data() {
    return {
      MessageList: [],
      value: '',
      //当前打字机打印的字符位置
      char_index: 0,
      //当前接收到的数据
      Current_ans: '',
      //判断是否在打印
      isTyping: false,
      typingId: null,
      // 判断是否数据接收完
      isEnd: false,
      //头像的url
      imgUrl: ImgUrl,
      isSend: false,
    }
  },
  mounted() {

  },
  methods: {
    //自动滚到最新消息
    scrollAuto() {
      this.$refs.chatBody.scrollTop = this.$refs.chatBody.scrollHeight;
    },
    //打字效果
    type() {
      this.isTyping = true;
      if (this.char_index < this.Current_ans.length) {
        this.MessageList[this.MessageList.length - 1].content += this.Current_ans[this.char_index];
        this.char_index++;
        this.scrollAuto();
        this.typingId = setTimeout(this.type, 20);
      }
      else {
        clearTimeout(this.typingId);
        this.typingId = null;
        this.isTyping = false;
        //更换头像
        if (this.isEnd) {
          document.getElementsByClassName("avatar")[document.getElementsByClassName('avatar').length - 1].src = this.imgUrl;
          this.isEnd = false;
        }
      }
    },
    handle_message(message) {
      message
    }

  }
}
</script>

<style scoped>
.title li {
  display: inline-block;
  list-style: none;
  animation: shine 2s linear infinite;
  animation-delay: calc(0.1s * var(--i));
}

@keyframes shine {
  0% {
    color: white;
    text-shadow: 0 0 10px #00b3ff,
      0 0 20px #00b3ff,
      0 0 40px #00b3ff
  }

  30%,
  70% {
    color: white;
    filter: hue-rotate(360deg);
    text-shadow: 0 0 10px #00b3ff,
      0 0 20px #00b3ff,
      0 0 40px #00b3ff
  }

  100% {
    color: transparent;
    box-shadow: none;

  }
}

.main-body {
  position: relative;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 980px;
  height: 940px;
  background-color: white;
  margin: 0 auto;
  padding-right: 20px;
  padding-left: 20px;
  margin-left: -510px;
  border: 1.5px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}

.title {
  padding: 10px;
  font-weight: bolder;
  font-size: 22px;
  color: transparent;

}

.chat-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 780px;
  padding: 20px;
  background-color: #F1F2F6;
  overflow: auto;
  scrollbar-width: none;
  /* 对于Firefox */
  -ms-overflow-style: none;
  /* 对于Internet Explorer和Edge */
  border-radius: 15px;
}

.chat-body::-webkit-scrollbar {
  display: none;
}

.user-msg {
  display: flex;
  justify-content: right;
  align-items: flex-start;
  background-color: #F1F2F6;
}

.chat-msg {
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background-color: #F1F2F6;

}

.msg-right {
  font-size: 20px;
  line-height: 28px;
  padding: 10px;
  background-color: aquamarine;
  max-width: 870px;
  margin-left: 8px;
  margin-right: 5px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.msg-left {
  font-size: 20px;
  line-height: 28px;
  padding: 10px;
  background-color: white;
  margin-left: 8px;
  max-width: 870px;
  margin-right: 5px;
  border-radius: 10px;
  margin-bottom: 8px;
}

.avatar {
  width: 40px;
  height: 40px;
}

.input-era {
  position: absolute;
  position: relative;
  width: 100%;

}
</style>